<template>
    <div id="add_address">
        <van-nav-bar title="新增地址" left-arrow @click-left="onClickLeft" />
        <ul>
            <li>
                <span>收货人</span>
                <input type="text" placeholder="请输入收货人">
            </li>
            <li>
                <span>联系电话</span>
                <input type="text" placeholder="请输入收货人联系电话">
            </li>
            <li>
                <span>收货地址</span>
                <van-field v-model="fieldValue" is-link readonly label="城市" placeholder="选择城市"
                    @click="showPicker = true" />
            </li>
            <li>
                <span>地址详情</span>
                <input type="text" placeholder="请输入现住址详情，精确到门牌号">
            </li>
            <li>
                <span>设为默认</span>
                <van-switch v-model="checked" />
            </li>
             <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const columns = [
    { text: '杭州', value: 'Hangzhou' },
    { text: '宁波', value: 'Ningbo' },
    { text: '温州', value: 'Wenzhou' },
    { text: '绍兴', value: 'Shaoxing' },
    { text: '湖州', value: 'Huzhou' },
];
const fieldValue = ref('');
const showPicker = ref(false);
// const phone = ref('15614231665')
// const hide = () => {
//     phone.value = phone.value.slice(0, 3) + '****' + phone.value.slice(7) 
// }
const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    fieldValue.value = selectedOptions[0].text;
};
const checked = ref(true);
</script>

<style scoped>
#add_address {
    width: 100vw;
    height: 100vh;

    ul>li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        padding-left: 15px;
        font-size: 14px;
        display: flex;
        align-items: center;

        span {
            width: 100px;
            height: 100%;
            display: inline-block;
        }

        input {
            flex: 1;
            height: 100%;
            border: none;
            outline: none;
            font-size: 14px;
        }
    }
}
</style>